	<div class="row ">
    		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
    <h1 class="page-title txt-color-blueDark"> 
				<i class="fa fa-fw fa-home"></i>
 表单
			<span>
    > 向导 
</span>
		
</h1>
</div>

			<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
    		<ul id="sparks" >
    			<li class="sparks-info">
    				 <h5> 个人收入 <span class="txt-color-blue">$47,171</span></h5>
				<div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm">
    					1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点流量 <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i>&nbsp;45%</span></h5>
				<div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
			<li class="sparks-info">
    				<h5> 站点营收 <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i>&nbsp;2447</span></h5>
				<div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm">
    					110,150,300,130,400,240,220,310,220,300, 270, 210
				
</div>
			
</li>
		
</ul>
	
</div>
	
</div>
  
<section id="widget-grid" class="">
    	<div class="row">
    		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget jarviswidget-color-darken" id="wid-id-0"
    				data-widget-editbutton="false"
				data-widget-deletebutton="false"
				>
<header>
    <span class="widget-icon"><i class="fa fa-check"></i></span>    <h2>基本向导示例</h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body ">
    						<div class="row">
							<form id="wizard-1" novalidate="novalidate">
								<div id="bootstrap-wizard-1" class="col-sm-12">
									<div class="form-bootstrapWizard">
										<ul class="bootstrapWizard form-wizard">
											<li class="active" data-target="#step1">
	<a href="#tab1" data-toggle="tab"> 
	<span class="step">1</span> 
	<span class="title">基本信息</span> 
</a>
 
</li>
											<li  data-target="#step2">
	<a href="#tab2" data-toggle="tab"> 
	<span class="step">2</span> 
	<span class="title">支付信息</span> 
</a>
  
</li>
											<li  data-target="#step3">
	<a href="#tab3" data-toggle="tab"> 
	<span class="step">3</span> 
	<span class="title">域设置</span> 
</a>
  
</li>
											<li  data-target="#step4">
	<a href="#tab4" data-toggle="tab"> 
	<span class="step">4</span> 
	<span class="title">保存表单</span> 
</a>
  
</li>
										</ul>
										<div class="clearfix"></div>
									</div>
									
									<div  class="tab-content $tabContentClass">
										<div class="tab-pane active" id="tab1">
    											<br>
											<h3><strong>步骤 1 </strong> - 基本信息</h3> 
											<div class="row ">
    												<div class="col-sm-12 ">
    													<div class="form-group">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-envelope fa-lg fa-fw"></i></span>
															<input class="form-control input-lg" placeholder="邮箱地址" type="text" name="email" id="email"> 
														</div>
													</div> 
												
</div>
											
</div>
											
											<div class="row ">
    												<div class="col-sm-6 ">
    													<div class="form-group">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-user fa-lg fa-fw"></i></span>
															<input class="form-control input-lg" placeholder="姓" type="text" name="fname" id="fname">
										
														</div>
													</div>
												
</div>
												
												<div class="col-sm-6 ">
    													<div class="form-group">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-user fa-lg fa-fw"></i></span>
															<input class="form-control input-lg" placeholder="名" type="text" name="lname" id="lname">
										
														</div>
													</div>
												
</div>
											
</div>
										
</div>
										
										<div class="tab-pane " id="tab2">
    											<br>
											<h3><strong>步骤 2</strong> - 支付信息</h3> 
											<div class="row ">
    												<div class="col-sm-4 ">
    												<div class="form-group">
												<div class="input-group">
													<span class="input-group-addon"><i class="fa fa-flag fa-lg fa-fw"></i></span>
													<select name="country" class="form-control input-lg">
														<option value="" selected="selected">请选择省份</option>
														<option value="zj">浙江</option>
														<option value="hn">河南</option>
														<option value="sd">山东</option>
														<option value="sx">山西</option>
														<option value="fj">福建</option>
														<option value="bj">北京</option>
														<option value="sh">上海</option>
														<option value="gd">广东</option>
														<option value="gx">广西</option>  
													</select>
												</div>
												</div>
												
</div>
												
												<div class="col-sm-4 ">
    													<div class="form-group">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-map-marker fa-lg fa-fw"></i></span>
															<select class="form-control input-lg" name="city">
																<option value="" selected="selected">请选择城市</option>
																<option>杭州</option>
																<option>上海</option>
																<option>宁波</option>
																<option>合肥</option>
																<option>南京</option>
																<option>无锡</option>
																<option>绍兴</option>
																<option>苏州</option>
																<option>温州</option> 
															</select>
														</div>
													</div>
												
</div>
												
												<div class="col-sm-4 ">
    													<div class="form-group">
														<div class="input-group">
															<span class="input-group-addon"><i class="fa fa-envelope-o fa-lg fa-fw"></i></span>
															<input class="form-control input-lg" placeholder="邮编" type="text" name="postal" id="postal">
														</div>
													</div>
												
</div>
												</div>
												<div class="row ">
    													<div class="col-sm-6 ">
    														<div class="form-group">
															<div class="input-group">
																<span class="input-group-addon"><i class="fa fa-phone fa-lg fa-fw"></i></span>
																<input class="form-control input-lg" data-mask="+99 (999) 999-9999" data-mask-placeholder= "X" placeholder="电话" type="text" name="wphone" id="wphone">
															</div>
														</div>
													
</div>
													
													<div class="col-sm-6 ">
    														<div class="form-group">
															<div class="input-group">
																<span class="input-group-addon"><i class="fa fa-mobile fa-lg fa-fw"></i></span>
																<input class="form-control input-lg" data-mask="+99 (999) 999-9999" data-mask-placeholder= "X" placeholder="手机" type="text" name="hphone" id="hphone">
														</div>
													
</div>
												
</div>
											
</div>
										
</div>
										
										<div class="tab-pane " id="tab3">
    											<br>
											<h3><strong>步骤 3</strong> - 域设置</h3>
											<div class="alert alert-info fade in">
    												<button class="close" data-dismiss="alert">
													×  
												</button>
												<i class="fa-fw fa fa-info"></i>
												<strong>信息!</strong> 你可以在这里放置一个信息框.
											
</div>
											<div class="form-group">
												<label>标签</label>
												<input class="form-control input-lg" placeholder="这是输入框" type="text" name="etc" id="etc">
											</div>
										
</div>
										
										<div class="tab-pane " id="tab4">
    											<br>
											<h3><strong>步骤 4</strong> - 保存表单</h3>
											<br>
											<h1 class="text-center text-success"><strong><i class="fa fa-check fa-lg"></i> 完成</strong></h1>
											<h4 class="text-center">点击下一步完成向导</h4>
											<br>
											<br>
										
</div>
								
										<div class="form-actions">
    											<div class="row ">
    												<div class="col-sm-12 ">
    													<ul class="pager wizard no-margin">
														<!--<li class="previous first disabled">
														<a href="javascript:void(0);" class="btn btn-lg btn-default"> 第一步 </a>
														</li>-->
														<li class="previous disabled">
															<a href="javascript:void(0);" class="btn btn-lg btn-default"> 上一步 </a>
														</li>
														<!--<li class="next last">
														<a href="javascript:void(0);" class="btn btn-lg btn-primary"> 最后 </a>
														</li>-->
														<li class="next">
															<a href="javascript:void(0);" class="btn btn-lg txt-color-darken"> 下一步 </a>
														</li>
													</ul>
												
</div>
											
</div>
										
</div>
									
</div>
								</div>
							</form>
						</div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
		
		<article class="col-sm-12 col-md-12 col-lg-6">
    			<div class="jarviswidget " id="wid-id-2"
    				data-widget-editbutton="false"
				data-widget-deletebutton="false"
				>
<header>
        <h2>Fuel 向导 </h2>
    
</header>
				<div>
    					<div class="jarviswidget-editbox">
    
</div>
					<div class="widget-body fuelux" id="">
            				<div class="wizard">
            				<ul class="steps">
								<li class="active" data-target="#step1">
	<span class="badge badge-info">1</span>步骤 1<span class="chevron"></span> 
</li>
								<li  data-target="#step1">
	<span class="badge">2</span>步骤 2<span class="chevron"></span> 
</li>
								<li  data-target="#step1">
	<span class="badge">3</span>步骤 3<span class="chevron"></span> 
</li>
								<li  data-target="#step1">
	<span class="badge">4</span>步骤 4<span class="chevron"></span> 
</li>
								<li  data-target="#step1">
	<span class="badge">5</span>步骤 5<span class="chevron"></span> 
</li>
				            </ul>
				            <div class="actions">
				                <button type="button" class="btn btn-sm btn-primary btn-prev">
				                    <i class="fa fa-arrow-left"></i>向前
				                </button>
				                <button type="button" class="btn btn-sm btn-success btn-next" data-last="Finish">
				                    向后<i class="fa fa-arrow-right"></i>
				                </button>
				            </div>
				        </div>
				        <div class="step-content">
				            <form class="form-horizontal" id="fuelux-wizard" method="post">  
								<div class="step-pane active" id="step1">
					                    <h3><strong>步骤 1 </strong> - 验证阶段</h3> 
				                    <!-- wizard form starts here -->
				                    <fieldset> 
				                        <div class="form-group has-warning">
				                            <label class="col-md-2 control-label">输入警告</label>
				                            <div class="col-md-10 ">
    				                                <div class="input-group">
				                                        <input type="text" class="form-control">
				                                    <span class="input-group-addon"><i class="fa fa-warning"></i></span>
				                                </div>
				                                <span class="help-block">输入可能有错误</span>
				                            
</div>
				                        </div>
				
				                        <div class="form-group has-error">
				                            <label class="col-md-2 control-label">输入错误</label>
				                            <div class="col-md-10 ">
    				                                <div class="input-group">
				                                        <input type="text" class="form-control">
				                                    <span class="input-group-addon"><i class="glyphicon glyphicon-remove-circle"></i></span>
				                                </div>
				                                <span class="help-block"><i class="fa fa-warning"></i>请纠正输入错误</span>
				                            
</div>
				                        </div>
				
				                        <div class="form-group has-success">
				                            <label class="col-md-2 control-label">输入成功</label>
				                            <div class="col-md-10 ">
    				                                <div class="input-group">
				                                    <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
				                                        <input type="text" class="form-control">
				                                    <span class="input-group-addon"><i class="fa fa-check"></i></span>
				                                </div>
				                                <span class="help-block">输入成功</span>
				                            
</div>
				                        </div>
				
				                        <div class="form-group">
				                            <label class="control-label col-md-2">成功输入图标</label>
				                            <div class="col-md-10 ">
    				                                <div class="row ">
    				                                    <div class="col-sm-12 ">
    				                                        <div class="input-icon-left">
				                                            <i class="fa txt-color-green fa-check"></i>
				                                            <input class="form-control" placeholder="图标在左边" type="text">
				                                        </div> 
				                                    
</div>
				                                
</div>
				                            
</div>
				                        </div>
				
				                    </fieldset> 
				                
</div>
								
								<div class="step-pane " id="step2">
					                    <h3><strong>步骤 2 </strong> - Alerts</h3>
									
									<div class="alert alert-warning fade in">
    				                        <button class="close" data-dismiss="alert">
				                            ×  
				                        </button>
				                        <i class="fa-fw fa fa-warning"></i>
				                        <strong>Warning</strong> Your monthly traffic is reaching limit.
				                    
</div>
				
				                    <div class="alert alert-success fade in">
    				                        <button class="close" data-dismiss="alert">
				                            ×  
				                        </button>
				                        <i class="fa-fw fa fa-check"></i>
				                        <strong>Success</strong> The page has been added.
				                    
</div>
				
				                    <div class="alert alert-info fade in">
    				                        <button class="close" data-dismiss="alert">
				                            ×  
				                        </button>
				                        <i class="fa-fw fa fa-info"></i>
				                        <strong>Info!</strong> You have 198 unread messages.
				                    
</div>
				
				                    <div class="alert alert-danger fade in">
    				                        <button class="close" data-dismiss="alert">
				                            ×  
				                        </button>
				                        <i class="fa-fw fa fa-times"></i>
				                        <strong>Error!</strong> The daily cronjob has failed.
				                    
</div>
				                
</div>
				                
								<div class="step-pane " id="step2">
					                    <h3><strong>步骤 3 </strong> - 继续向导</h3>
				                    <br>
				                    <br>
				                    <h1 class="text-center text-primary">这是步骤 3</h1>
				                    <br>
				                    <br>
				                    <br>
				                    <br>
				                
</div>
				 
								<div class="step-pane " id="step4">
					                    <h3><strong>步骤 4 </strong> - 继续向导...</h3>
				                    <br>
				                    <br>
				                    <h1 class="text-center text-danger">这是步骤 4 </h1>
				                    <br>
				                    <br>
				                    <br>
				                    <br>
				                
</div>
				
				                <div class="step-pane " id="step5">
					                    <h3><strong>步骤 5 </strong> - 完成!</h3>
				                    <br>
				                    <br>
				                    <h1 class="text-center text-success"><i class="fa fa-check"></i> Congratulations!
				                        <br>
				                        <small>Click finish to end wizard</small>
									</h1>
				                    <br>
				                    <br>
				                    <br>
				                    <br>
				                
</div>
				            </form>
				        </div>
					
</div>
 <!-- end widgetContent -->
				
</div>
 <!-- end jarvisWidgetBody -->
			
</div>
<!-- end widget -->
 <!-- end jarvisWidget -->
		
</article>
 <!-- end widgetGridCol -->
	
</div>
 <!-- end widgetGridRow -->

</section>
 <!-- end widgetGrid -->

 <script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();

	// PAGE RELATED SCRIPTS

	// pagefunction

	var pagefunction = function() {

		// load bootstrap wizard
		
		loadScript("js/plugin/bootstrap-wizard/jquery.bootstrap.wizard.min.js", runBootstrapWizard);

		//Bootstrap Wizard Validations

		function runBootstrapWizard() {

			var $validator = $("#wizard-1").validate({

				rules : {
					email : {
						required : true,
						email : "Your email address must be in the format of name@domain.com"
					},
					fname : {
						required : true
					},
					lname : {
						required : true
					},
					country : {
						required : true
					},
					city : {
						required : true
					},
					postal : {
						required : true,
						minlength : 4
					},
					wphone : {
						required : true,
						minlength : 10
					},
					hphone : {
						required : true,
						minlength : 10
					}
				},

				messages : {
					fname : "Please specify your First name",
					lname : "Please specify your Last name",
					email : {
						required : "We need your email address to contact you",
						email : "Your email address must be in the format of name@domain.com"
					}
				},

				highlight : function(element) {
					$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
				},
				unhighlight : function(element) {
					$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
				},
				errorElement : 'span',
				errorClass : 'help-block',
				errorPlacement : function(error, element) {
					if (element.parent('.input-group').length) {
						error.insertAfter(element.parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

			$('#bootstrap-wizard-1').bootstrapWizard({

				'tabClass' : 'form-wizard',
				'onNext' : function(tab, navigation, index) {
					var $valid = $("#wizard-1").valid();
					if (!$valid) {
						$validator.focusInvalid();
						return false;
					} else {
						$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).addClass('complete');
						$('#bootstrap-wizard-1').find('.form-wizard').children('li').eq(index - 1).find('.step').html('<i class="fa fa-check"></i>');
					}
				}
			});

		};

		// load fuelux wizard
		
		loadScript("js/plugin/fuelux/wizard/wizard.min.js", fueluxWizard);
		
		function fueluxWizard() {

			var wizard = $('.wizard').wizard();

			wizard.on('finished', function(e, data) {
				//$("#fuelux-wizard").submit();
				//console.log("submitted!");
				$.smallBox({
					title : "Congratulations! Your form was submitted",
					content : "<i class='fa fa-clock-o'></i><i>1 seconds ago...</i>",
					color : "#5F895F",
					iconSmall : "fa fa-check bounce animated",
					timeout : 4000
				});

			});

		};

	};

	// end pagefunction
	
	// Load bootstrap wizard dependency then run pagefunction
	pagefunction();

</script>